.js .loading:after,
.js .loading:before {
    content: "";
    position: fixed;
    z-index: 1000
}

.js .loading:before {
    background: var(--color-bg);
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.js .loading:after {
    animation: loaderAnim .7s linear infinite alternate forwards;
    background: var(--color-link);
    border-radius: 50%;
    height: 60px;
    left: 50%;
    margin: -30px 0 0 -30px;
    opacity: .4;
    top: 50%;
    width: 60px
}

@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(.5, .5, 1)
    }
}

a {
    color: var(--color-link);
    text-decoration: none
}

a,
a:hover {
    outline: none
}

a:hover {
    color: var(--color-link-hover)
}

a:focus {
    background: #d3d3d3;
    outline: none
}

a:focus:not(:focus-visible) {
    background: transparent
}

a:focus-visible {
    background: transparent;
    outline: 2px solid red
}

.unbutton {
    background: none;
    border: 0;
    font: inherit;
    margin: 0;
    padding: 0
}

.unbutton:focus {
    outline: none
}

.frame {
    padding: 1.5rem;
    position: relative;
    text-align: center;
    z-index: 1000
}

.frame__title {
    font-size: 1rem;
    font-weight: 500;
    grid-area: title;
    justify-self: center;
    margin: 0 0 1rem
}

.frame__links {
    display: inline;
    grid-area: links;
    justify-self: start;
    text-align: center
}

.frame__links a:not(:last-child) {
    margin-right: 1rem
}

.frame__demos {
    margin: 1rem 0
}

.frame__demo--current,
.frame__demo--current:hover {
    color: var(--color-text)
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-items: center;
    /* margin: 10vh auto 40vh; */
    max-width: 1200px;
    text-align: center
}

.content__title {
    font-size: 11vw;
    grid-column: 1/span 3;
    line-height: .65;
    margin: 10vh 0 0;
    width: 100%
}

.content__title-first {
    display: block;
    font-family: forma-djr-deck, sans-serif;
    font-weight: 500;
    text-transform: uppercase
}

.content__title-second {
    font-family: tenez, sans-serif;
    font-style: normal;
    font-weight: 300;
    text-transform: uppercase
}

.image {
    cursor: pointer;
    display: grid;
    margin: 0 1vw;
    /* max-width: 45vw; */
    overflow: hidden;
    position: relative
}

.image--style-1 {
    border-radius: 145px;
    height: 450px;
    width: 285px
}

.image--style-2 {
    border-radius: 50%;
    height: 320px;
    width: 320px
}

.image--style-3 {
    border-radius: 5px;
    height: 450px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.image--style-4 {
    border-radius: 145px 145px 0 0;
    height: 450px;
    width: 285px
}

.image>.image__element,
.image__wrap {
    border-radius: inherit;
    grid-area: 1/1/2/2;
    height: 100%;
    position: relative;
    transform-origin: inherit;
    width: 100%;
    will-change: transform
}

.image__wrap {
    overflow: hidden
}

.image__element {
    background-position: 50% 50%;
    background-size: cover;
    height: 100%;
    width: 100%
}

@media screen and (min-width:53em) {
    .frame {
        align-items: baseline;
        display: grid;
        grid-template-areas: "links title sponsor";
        grid-template-columns: 25% 50% 25%;
        justify-content: space-between;
        text-align: left
    }
}